<template>

      <div class="base">
                  <header>
        <div class="logo clear fl" @click="goback(-1)">
            <a href="javascript:;">    <img  src="../assets/images/logo.png" alt=""></a>
            <a  href="javascript:;"> 苏州礼成文化传媒</a>

        </div>
  
             <slot name="siteTop"></slot>
            <slot name="weddingList" ></slot>
        
    
        
        <div class="nav claer fr">
            <div class="nav_title" @click="toggle">导航
                <ul class="nav_ul" v-show="flag">
                  <li><router-link to="/about">关于我们</router-link></li>
                  <li><router-link to="/site">现场布置</router-link></li>
                  <li><router-link to="/house">婚宴酒店</router-link></li>
                  <li><router-link to="/wedding">婚礼服务</router-link></li>
                  <li><router-link to="/car">婚车租赁</router-link></li>
                  <li><router-link to="/select">精挑细选</router-link></li>
                </ul>
            </div>
            <img src="../assets/images/admin.png" alt="">
        </div>
   
    </header>

    
      </div>

    


</template>

<script>


export default {
  name: "top",
    
  data() {
    return {
      flag: false
  
    };
  },
  components: {

   
  },
  methods: {
    toggle() {
      this.flag = !this.flag;
    },
    goback(){
    this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
@import url("../assets/css/base.css");
@import url("../assets/font/iconfont.css");
/* 头部部分 */

header {
  width: 100%;
  height: 135px;
  background-color: #121212;
  line-height: 135px;
  position: relative;
}

header .logo {
  width: 280px;
  height: 60px;
  float: left;
  display: flex;
  flex-direction: row;
  margin-left: 35px;
  position: absolute;
  top: 25%;
  left: 0;
}

header .logo img {
  width: 60px;
  height: 60px;
}

header .logo a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding-left: 12px;
  line-height: 60px;
}

header .nav {
  width: 290px;
  height: 70px;
  float: right;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
  margin-right: 35px;
  position: absolute;
  top: 25%;
  right: 0;
}

header .nav .nav_title {
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  margin-right: 50px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

header .nav .nav_title::before {
  content: "\e618";
  font-family: "iconfont";
  font-size: 50px;
  color: #fff;
  margin-right: 10px;
}
.nav_ul {
  width: 100%;
  height: 230px;
  position: absolute;
  top: 72%;
  right: 0;
}
.nav_ul li {
  height: 30px;
  border-radius: 15px;
  margin-top: 20px;
  font-size: 16px;
  background-color: #201e19;
  text-align: center;
  line-height: 30px;
  opacity: 0.4;
}
.nav_ul li a {
  color: #fff;
}
.nav_ul li:first-child::before {
  content: "\e634";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:nth-child(2)::before {
  content: "\e65b";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:nth-child(3)::before {
  content: "\e641";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:nth-child(4)::before {
  content: "\e623";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:nth-child(5)::before {
  content: "\e619";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:nth-child(6)::before {
  content: "\e880";
  font-family: "iconfont";
  padding-right: 5px;
}
.nav_ul li:hover {
  border-radius: 15px;
  display: block;
  background-color: #ff4e72;
}
header .nav img {
  width: 70px;
  height: 70px;
}

.tab {
  width: 100%;
  height: 100%;
  /* background-color: yellowgreen; */
  color: white;
  position: absolute;
  left: 0;
  top: 40%;
  margin: 0 60px;
}
</style>
